import type { Metadata } from "next";

import Link from "next/link";

import { notFound } from "next/navigation";

import { Card, PageHeader, SectionHeader } from "@/components/ui";

import { DataTable, type Column, type Row } from "@/components/data-table";

import { SourceLink } from "@/components/source-link";

import { StatusPill, classifyStatus } from "@/components/status-pill";

import { VoteTally } from "@/components/vote-tally";

import { PositionTag, positionColor } from "@/components/position-tag";

import { PartyTag } from "@/components/party-tag";

import { MemberAvatar } from "@/components/member-avatar";

import { getVoteById, type VotePosition } from "@/lib/feed";

import { resolveVoteSubject } from "@/lib/vote-subject";

import { formatDate, formatBillNumber } from "@/lib/format";

import { CiteThis } from "@/components/cite-this";

import { ArchiveLink } from "@/components/record-archive";

export const revalidate = 300;

export function generateMetadata({

  params,

}: {

  params: { id: string };

}): Metadata {

  const numeric = parseInt(params.id.replace(/^vote:/, ""), 10);

  const vote = Number.isFinite(numeric) ? getVoteById(numeric) : null;

  if (!vote) return { title: "Vote not found" };

  const subject = resolveVoteSubject(vote);

  return {

    title: `${vote.chamber} vote · ${formatDate(vote.date)}`,

    description: subject.primary,

  };

}

const POSITION_ORDER: Record<string, number> = {

  yea: 0,

  nay: 1,

  present: 2,

  "not voting": 3,

};

function rosterSort(a: VotePosition, b: VotePosition): number {

  const pa = POSITION_ORDER[(a.position || "").toLowerCase()] ?? 9;

  const pb = POSITION_ORDER[(b.position || "").toLowerCase()] ?? 9;

  if (pa !== pb) return pa - pb;

  return a.member.localeCompare(b.member);

}

export default function VoteDetailPage({

  params,

}: {

  params: { id: string };

}) {

  const voteUrlId = params.id;

  const numeric = parseInt(params.id.replace(/^vote:/, ""), 10);

  const vote = Number.isFinite(numeric) ? getVoteById(numeric) : null;

  if (!vote) notFound();

  const variant = classifyStatus(vote.result);

  const passed = vote.yea > vote.nay;

  const roster = [...vote.positions].sort(rosterSort);

  const counts = vote.positions.reduce<Record<string, number>>((m, p) => {

    const key = (p.position || "Not Voting").toLowerCase();

    m[key] = (m[key] ?? 0) + 1;

    return m;

  }, {});

  const subject = resolveVoteSubject(vote);

  return (

    <div

      className="mx-auto w-full max-w-[860px] px-6 sm:px-8"

      style={{

        paddingTop: "clamp(32px, 6vw, 56px)",

        paddingBottom: "clamp(48px, 8vw, 80px)",

      }}

    >

      <Link

        href="/votes"

        className="focus-ring tap no-underline hover:underline"

        style={{

          display: "inline-flex",

          alignItems: "center",

          gap: "8px",

          fontFamily: "var(--font-mono), ui-monospace, monospace",

          fontSize: "13px",

          letterSpacing: "0.08em",

          color: "var(--dk-signal)",

          marginBottom: "32px",

        }}

      >

        ← Votes

      </Link>

      {

}

      <div className="mt-4 mb-6 rounded-[3px] border border-line bg-surface p-5">

        <p className="label mb-1.5 text-ash">

          {subject.kind === "bill"

            ? "Bill voted on"

            : subject.kind === "nomination"

            ? "Presidential nomination"

            : subject.kind === "treaty"

            ? "Treaty ratification"

            : subject.kind === "ref"

            ? "Legislative document"

            : "Question voted on"}

        </p>

        {}

        {subject.kind === "bill" && vote.billId != null ? (

          <p className="font-mono text-[14px] leading-snug text-paper">

            <Link

              href={`/bill/${vote.billId}`}

              className="focus-ring underline underline-offset-4 hover:text-paper"

            >

              {formatBillNumber(vote.billNumber)}

            </Link>

            {vote.billTitle ? (

              <span className="text-ash"> - {vote.billTitle}</span>

            ) : null}

          </p>

        ) : (

          <p className="font-mono text-[14px] leading-snug text-paper">

            {subject.primary}

          </p>

        )}

        {}

        {subject.secondary && subject.secondary !== vote.result ? (

          <p className="mt-2 text-[13px] text-ash">{subject.secondary}</p>

        ) : vote.question && subject.kind === "bill" ? (

          <p className="mt-2 text-[13px] text-ash">{vote.question}</p>

        ) : null}

      </div>

      <PageHeader

        eyebrow={`${vote.chamber} · ${formatDate(vote.date)}${

          vote.rollNumber ? ` · Roll ${vote.rollNumber}` : ""

        }`}

        title={vote.question || vote.result || "Roll-call vote"}

        lead={vote.result}

      />

      {}

      <div className="grid gap-4 sm:grid-cols-3">

        <Card className="p-5">

          <p className="label mb-2">Result</p>

          <StatusPill variant={variant} dot>

            {passed ? "Passed" : "Failed"}

          </StatusPill>

          {

}

          {vote.result &&

          vote.result.trim().toLowerCase() !== (passed ? "passed" : "failed") ? (

            <p className="mt-2 font-mono text-[12px] text-ash-2">{vote.result}</p>

          ) : null}

        </Card>

        <Card className="p-5">

          <p className="label mb-2">Chamber</p>

          <p className="font-mono text-[13px] text-paper">{vote.chamber}</p>

          <p className="label mt-2 text-ash-2">{formatDate(vote.date)}</p>

        </Card>

        <Card className="p-5">

          <p className="label mb-2">Official record</p>

          <SourceLink url={vote.sourceUrl} label="Roll call" />

          {vote.archiveUrl ? (

            <>

              <div className="mt-2">

                <ArchiveLink url={vote.archiveUrl} />

              </div>

              <p className="label mt-2 text-ash-2">

                Docket preserves a copy of the roll-call record.

              </p>

            </>

          ) : (

            <p className="label mt-2 text-ash-2">

              {vote.question ? "Question of the vote shown above." : "No question text on file."}

            </p>

          )}

        </Card>

      </div>

      {vote.recorded ? (

        <>

          {}

          <div className="mt-10 grid gap-8 lg:grid-cols-[1fr_1.4fr]">

            <div>

              <SectionHeader eyebrow="Tally" title="Vote total" />

              <Card className="p-5">

                <VoteTally

                  yea={vote.yea}

                  nay={vote.nay}

                  present={vote.present}

                  result={passed ? "passed" : "failed"}

                />

                {vote.notVoting ? (

                  <p className="label mt-4 text-ash-2">

                    {vote.notVoting} member{vote.notVoting === 1 ? "" : "s"} not voting.

                  </p>

                ) : null}

                <div className="mt-4">

                  <SourceLink url={vote.sourceUrl} />

                </div>

              </Card>

            </div>

            {}

            <div>

              <SectionHeader eyebrow="By position" title="How members voted" />

              <Card className="p-5">

                <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">

                  <SummaryChip label="Yea" value={counts.yea ?? vote.yea} color="var(--dk-yea)" />

                  <SummaryChip label="Nay" value={counts.nay ?? vote.nay} color="var(--dk-nay)" />

                  <SummaryChip

                    label="Present"

                    value={counts.present ?? vote.present}

                    color="var(--dk-ash)"

                  />

                  <SummaryChip

                    label="Not voting"

                    value={counts["not voting"] ?? 0}

                    color="var(--dk-ash-2)"

                  />

                </div>

                <p className="label mt-4 text-ash-2">

                  Default order: by position, then alphabetical - not grouped by party.

                </p>

              </Card>

            </div>

          </div>

          {}

          <div className="mt-12">

            <SectionHeader

              eyebrow={`Roster · ${roster.length} member${roster.length === 1 ? "" : "s"}`}

              title="Every member's position"

              description="Name, party, state, and district for each member, with how they voted. Sorted by vote then alphabetical."

            />

            {roster.length === 0 ? (

              <Card className="p-5">

                <p className="font-mono text-[13px] text-ash">

                  No per-member positions are linked to this vote in the record.

                </p>

              </Card>

            ) : (

              <VoteRoster roster={roster} chamber={vote.chamber} />

            )}

            <p className="label mt-4 text-ash-2">

              Party shown in desaturated, equal-weight tones. Source: {""}

              <span style={{ color: positionColor("Yea") }}>Yea</span>,{" "}

              <span style={{ color: positionColor("Nay") }}>Nay</span> - never vivid red or blue.

            </p>

          </div>

        </>

      ) : (

        <div className="mt-10">

          <SectionHeader eyebrow="No individual record" title="Passed without a roll call" />

          <Card className="p-6">

            <p className="prose-lead text-paper">

              No individual record exists - this action passed by voice vote or

              unanimous consent. The chamber did not record how each member voted.

            </p>

            <p className="mt-4 font-mono text-[13px] text-ash">

              Recorded result: {vote.result || "Agreed"}.

            </p>

            <div className="mt-4">

              <SourceLink url={vote.sourceUrl} />

            </div>

          </Card>

        </div>

      )}

      {}

      <div className="mt-12 border-t border-line pt-8">

        <p className="label mb-4 text-ash">Cite this record</p>

        <CiteThis

          kind="vote"

          title={`${vote.chamber} Roll-Call Vote - ${subject.primary} (${formatDate(vote.date)})`}

          permalink={`https://usdocket.org/votes/${voteUrlId}`}

          sourceUrl={vote.sourceUrl}

        />

      </div>

    </div>

  );

}

function SummaryChip({

  label,

  value,

  color,

}: {

  label: string;

  value: number;

  color: string;

}) {

  return (

    <div className="border border-line p-3">

      <div className="label flex items-center gap-1.5" style={{ color }}>

        <span

          aria-hidden="true"

          className="inline-block h-1.5 w-1.5 rounded-full"

          style={{ backgroundColor: color }}

        />

        {label}

      </div>

      <div className="mt-1 font-mono text-xl tabular-nums text-paper">{value}</div>

    </div>

  );

}

function formatMemberDistrict(chamber: string, district: number | null): string {

  if ((chamber ?? "").toLowerCase() === "senate") return "";

  if (district === null || district <= 0) return " · At-Large";

  return ` · Dist. ${district}`;

}

function VoteRoster({ roster, chamber }: { roster: VotePosition[]; chamber: string }) {

  const columns: Column[] = [

    { key: "member", header: "Member", cardTitle: true },

    { key: "party", header: "Party" },

    { key: "state", header: "State" },

    { key: "position", header: "Position" },

  ];

  const rows: Row[] = roster.map((p, i) => ({

    key: `${p.memberHref || i}-${p.member}-${i}`,

    cells: {

      member: (

        <span className="inline-flex items-center gap-2 text-paper">

          <MemberAvatar name={p.member} photoUrl={p.photoUrl} size="sm" />

          <span className="min-w-0">

            {p.memberHref ? (

              <Link

                href={p.memberHref}

                className="focus-ring rounded-sm underline underline-offset-4 hover:text-paper"

              >

                {p.member}

              </Link>

            ) : (

              p.member

            )}

          </span>

        </span>

      ),

      party: p.party ? <PartyTag party={p.partyCode} /> : "-",

      state: (

        <span className="text-ash">

          {p.state}

          {formatMemberDistrict(chamber, p.district)}

        </span>

      ),

      position: <PositionTag position={p.position} />,

    },

  }));

  return (

    <DataTable

      caption="Member roster for this vote: name, party, state, district, position."

      cardLabel="Member roster"

      columns={columns}

      rows={rows}

      pageSize={50}

    />

  );

}